<template>
	<view class="contrast">
		<view class="richText">
			<rich-text :nodes="defultText"></rich-text>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">是否含封闭期 :</view>
			<radio-group name="" v-model="selectedValue" @change="radioChange">
				<label class="radio-item">
					<radio :value="true" :name="true" checked="" />
					<text>是</text>
				</label>
				<label class="radio-item">
					<radio :value="false" :name="false" />
					<text>否</text>
				</label>
			</radio-group>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">投资金额 :</view>
			<input v-model="annualInvestment" class="calculator-text" type="digit" placeholder="请输入投资金额" @blur="calculate" />
			<text class="required">*</text>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">连投年限 :</view>
			<input v-model="investmentYears" class="calculator-text" type="number" placeholder="请输入投资年限" @blur="calculate" />
			<text class="required">*</text>
		</view>
		<view class="calculator-input">
			<view class="calculator-title">年化利率(%) :</view>
			<input v-model="annualInterestRate" class="calculator-text" type="digit" placeholder="请输入年化利率" @blur="calculate" />
			<text class="required">*</text>
		</view>

		<view class="result-view">
			<view class="result-title">
				<view class="title">年度</view>
				<view class="title">单利</view>
				<view class="title">复利</view>
				<view class="title">差额</view>
			</view>
			<view class="result-item" v-for="(item, index) in resultList">
				<view class="item">{{ item.year }}</view>
				<view class="item">{{ item.singleInterest }}</view>
				<view class="item">{{ item.compoundInterest }}</view>
				<view class="item">{{ item.difference }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			annualInterestRate: 2, // 年化利率2%
			annualInvestment: 10000, // 每年投资金额
			investmentYears: 1, // 连续投资年限
			resultList: [], // 存储最终结果的列表
			selectedValue: null,
			defultText: '<h3>使用说明：</h3> <p>1、提供100个年度内，单利、复利收益对比及差额。</p><p>2、可选择包含封闭期和非封闭期计算。</p><p>3、计算结果标红部分为收益翻倍的关键年度。</p><p>4、可自行修改投资金额、年限、年化利率，并自动计算。</p>',
		};
	},
	created() {
		//设置分享到微信分享到朋友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	onLoad() {
		let principalForSimple = 0; // 单利计算的本金
		let principalForCompound = 0; // 复利计算的本金
		for (let year = 1; year <= 100; year++) {
			// 前5年持续投入资金，更新本金
			if (year <= this.investmentYears) {
				principalForSimple += this.annualInvestment;
				principalForCompound += this.annualInvestment;
			}
			// 计算单利
			let singleInterest = principalForSimple * (1 + (this.annualInterestRate / 100) * year);
			// 计算复利
			let compoundInterest = principalForCompound;
			for (let i = 0; i < year; i++) {
				compoundInterest *= 1 + this.annualInterestRate / 100;
			}
			// 计算差额
			let difference = compoundInterest - singleInterest;

			this.resultList.push({
				year: year,
				singleInterest: singleInterest.toFixed(0),
				compoundInterest: compoundInterest.toFixed(0),
				difference: difference.toFixed(0)
			});
		}
	},
	methods: {
		radioChange(value) {
			this.selectedValue = value.detail.value;
			this.calculate();
		},
		calculate() {
			console.log(this.selectedValue);
			if (this.selectedValue == 'true'){
				let calculateList = [];
				let principalForSimple = 0; // 单利计算的本金
				let principalForCompound = 0; // 复利计算的本金
				for (let year = 1; year <= 100; year++) {
					// 前5年持续投入资金，更新本金
					if (year <= this.investmentYears) {
						principalForSimple += Number(this.annualInvestment);
						principalForCompound += Number(this.annualInvestment);
					}
					// 计算单利
					let singleInterest = principalForSimple * (1 + (this.annualInterestRate / 100) * year);
					// 计算复利
					let compoundInterest = principalForCompound;
					for (let i = 0; i < year; i++) {
						compoundInterest *= 1 + this.annualInterestRate / 100;
					}
					// 计算差额
					let difference = compoundInterest - singleInterest;
				
					calculateList.push({
						year: year,
						singleInterest: singleInterest.toFixed(0),
						compoundInterest: compoundInterest.toFixed(0),
						difference: difference.toFixed(0)
					});
					this.resultList = calculateList;
				}
			}
			else if(this.selectedValue == 'false'){
				let calculateList = [];
				let principalForSimple = 0; // 单利计算的本金
				let principalForCompound = 0; // 复利计算的本金
				for (let year = 1; year <= 100; year++) {
					// 前5年持续投入资金，更新本金
					if (year <= this.investmentYears) {
						principalForSimple += Number(this.annualInvestment);
						principalForCompound += Number(this.annualInvestment);
					}
					// 计算单利
					let singleInterest = principalForSimple * (1 + (this.annualInterestRate / 100) * year);
					// 计算复利
					let compoundInterest = principalForCompound;
					for (let i = this.investmentYears; i < year; i++) {
						compoundInterest *= 1 + this.annualInterestRate / 100;
					}
					// 计算差额
					let difference = compoundInterest - singleInterest;

					calculateList.push({
						year: year,
						singleInterest: singleInterest.toFixed(0),
						compoundInterest: compoundInterest.toFixed(0),
						difference: difference.toFixed(0)
					});
					this.resultList = calculateList;
				}
			}else{
				let calculateList = [];
				let principalForSimple = 0; // 单利计算的本金
				let principalForCompound = 0; // 复利计算的本金
				for (let year = 1; year <= 100; year++) {
					// 前5年持续投入资金，更新本金
					if (year <= this.investmentYears) {
						principalForSimple += Number(this.annualInvestment);
						principalForCompound += Number(this.annualInvestment);
					}
					// 计算单利
					let singleInterest = principalForSimple * (1 + (this.annualInterestRate / 100) * year);
					// 计算复利
					let compoundInterest = principalForCompound;
					for (let i = 0; i < year; i++) {
						compoundInterest *= 1 + this.annualInterestRate / 100;
					}
					// 计算差额
					let difference = compoundInterest - singleInterest;
				
					calculateList.push({
						year: year,
						singleInterest: singleInterest.toFixed(0),
						compoundInterest: compoundInterest.toFixed(0),
						difference: difference.toFixed(0)
					});
					this.resultList = calculateList;
				}
			}
			
		}
	}
};
</script>

<style lang="stylus">
.contrast
	.calculator-input
		display: flex
		align-items: center;       //垂直居中
		.calculator-title
			color: #ff0000
			margin-top: 30rpx
			height: 70rpx
			margin-right: 20rpx
			margin-left: 70rpx
			width: 250rpx
			font-weight: bold
			font-size: 30rpx
		.radio-item
			margin:0 20rpx
			font-size:28rpx
			font-weight: bold
		.required
			color: #ff0000
			margin-left: 10rpx
		.calculator-text
			height: 70rpx
			width: 300rpx
			margin-bottom: 20rpx
			border: 2px solid #d9d9d9
			border-radius: 5px;
			color: #333;
			text-align: center
			font-weight: bold

	.result-view
			margin: 10 10rpx
			font-size: 24rpx
		.result-title
			display: flex
			justify-content: center;   //水平居中
			align-items: center;       //垂直居中
			.title
				background-color: #f5f5f5
				width: 170rpx
				border: 1px solid #dcdcdc
				text-align: center
				margin-left: 5rpx
				color: #d81e06
				font-weight: bold

		.result-item
			display: flex
			justify-content: center;   //水平居中
			align-items: center;       //垂直居中
			.item
				width: 170rpx
				border: 1px solid #dcdcdc
				text-align: center
				margin-left: 5rpx
				font-weight: bold
.richText
	color: #fff
	margin-top: 20rpx
	padding: 20rpx;
	line-height: 1.5;
	font-size: 24rpx
	font-weight: bold
	background-image: linear-gradient(45deg,#ff4b87,#ff8c8c);
</style>
